<script setup>
import { ref, toRefs } from 'vue'

const props = defineProps({
  title:{
    type: String,
    default: '--',
  },
  imgUrl:{
    type: String,
    default: '',
  },
  data:{
    type: Number,
    default: '-',
  },
  unit:{
    type:String,
    default: '--',
  },
  backUrl:{
    type:String,
    default: '',
  }
})
const { title, imgUrl, data, unit } = toRefs(props);
</script>

<template>
  <div class="container">
    <div class="container-title">
      <img :src="imgUrl" alt="" >
      <span class="title-content">{{ title }}</span>
    </div>
    <a-divider style="height: 1px; background-color: #BFD8FC; margin: 0"/>
    <div class="container-content">
      <span class="content-data">{{ data==null?'-':data }}</span>
      <span class="content-unit">{{ unit }}</span> 
      <img :src="backUrl" alt="" class="content-back">
    </div>
  </div>
</template>

<style lang="less">
  .container {
    width: 372px;
    height: 181px;
    border: 2px solid #fff;
    border-radius: 10px;
    &-title {
      display: flex;
      align-items: center;
      padding-left: 10px;
      height: 80px;
      width: 100%;
      .title-content {
        font-family: PingFang SC;
        font-size: 20px;
        font-weight: 300;
        padding-left: 10px;
        color:#1B2A52;
      }
    }
    &-content {
      height: 100px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      position: relative;
      .content-data {
        font-family: PingFang SC;
        font-size: 64px;
        font-weight: 600;
        line-height: 90px;
        background-image:-webkit-linear-gradient(top, #F99C34 0%, #FFC88B 100%);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
      }
      .content-unit {
        font-family: PingFang SC;
        font-size: 16px;
        font-weight: 300;
        line-height: 22px;
        color: #1B2A52;
      }
      .content-back {
        position: absolute;
        left: 60%;
        opacity: 0.2;
      }
    }
  }
</style>